<!-- 外观设置 -->

<template>
  <div style="width: 70%;height:100%;padding: 10px;box-sizing: border-box;margin: 0 auto">
    <p style="border-bottom: 1px solid #e8e8e8;font-size: 30px;margin: 0 0 30px 0;box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 3px">
      <i>{{ $t('main.Theme') }}</i></p>
    <div style="margin-bottom: 20px">
      <span>{{ $t('main.DarkTheme') }}</span>
      <el-switch
          v-model="value1"
          style="float: right">
      </el-switch>
    </div>
    <div>
      <span style="float: left">{{ $t('main.Customize') }}</span>
      <el-switch
          v-model="value2"
          style="float: right">
      </el-switch>
    </div>
    <p style="clear: both;border-bottom: 1px solid #e8e8e8;font-size: 30px;margin: 120px 0 30px 0;box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 3px">
      <i>{{ $t('main.Show') }}</i></p>
    <span>{{ $t('main.FullScreenMode') }}</span>
    <el-switch
        @change="handleFullScreen"
        v-model="value3"
        style="float: right">
    </el-switch>
  </div>
</template>

<script>
export default {
  name: "Settings_Exterior",
  data() {
    return {
      value1: false,
      value2: false,
      value3: false
    }
  },
  methods: {
    // 全屏开关
    handleFullScreen() {
      if (this.fullscreen) {
        // 退出全屏
        // 检查浏览器是否支持exitFullscreen方法
        if (document.exitFullscreen) {
          //exitFullscreen() 全屏时退出 不是全屏时不做改变
          document.exitFullscreen()
        }
      } else {
        // 所有元素
        let elements = document.documentElement
        if (elements.requestFullscreen) {
          // 进入全屏
          elements.requestFullscreen()
        }
      }
      this.fullscreen = !this.fullscreen
    }
  }
}
</script>

<style scoped>

</style>